﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--DXMETADATA start type="MetaCharset" --><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8"><!--DXMETADATA end-->
    <meta http-equiv="X-UA-Compatible" value="IE=9" />

    <!--DXMETADATA start type="Literal" condition="helpversion:value=3" value="<meta name=""Microsoft.Help.SelfBranded"" content=""true"" />" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<title>%%ProjectTitle%% - %%ItemTitle%%</title>" --><title>SpreadJS Documentation - Data Markers</title><!--DXMETADATA end-->
    <!--DXMETADATA start type="ItemTitle" format="<meta name=""Title"" content=""%%ProjectTitle%% - %%ItemTitleNoQuotes%%""/>" --><meta name="Title" content="SpreadJS Documentation - Data Markers"/><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="jquery" filetype="script" firstlinkattributes="id=""mshs_support_script"""--><script src="template/packages/jquery/script/default/jquery-1.11.3.min.js" type="text/javascript" id="mshs_support_script"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="script"--><script src="template/packages/jquery-ui/script/default/jquery-ui-1.11.4.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="jquery-ui" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/jquery-ui/css/default/jquery-ui-1.11.4.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="TemplateSettingsJson" format="<script type=""text/javascript"">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:%%TemplateSettingsJson%%});</script>" --><script type="text/javascript">var Innovasys=(Innovasys||{});$.extend(true,Innovasys,{settings:{isHideBodyDuringLoadDisabled:true,dynamictoc:{isEnabled:true},inthistopic:{isSupported:true},dynamicstyles:{isDynamicWordWrapEnabled:true}}},{settings:{"dynamictoc":{"initialNodeId":"n355","initialNodeContainer":"c0","isResizable":true},"inthistopic":{"isEnabled":true},"currentLocale":"-","isFrameless":true,"navigationKind":"inpage","versions":{"locale":{"currentId":"-"}}}});</script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="light" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/light/css/dynamic-toc.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="Synopsis" StripHtmlTags="True" MaxLength="250" format="<meta name=""Description"" content=""%%Synopsis%%"" />"--><meta name="Description" content="SpreadJS enables users to create powerful charts by allowing them to configure data markers using different types of shapes and lines. Data markers are used to highlight data points in charts. While working with line charts and radar charts, you can " /><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="css"--><link rel="stylesheet" type="text/css" href="template/packages/plugins-topics/css/default/jquery-plugins.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="css" firstlinkattributes=" data-mshv2-stylesheet=""/template/packages/core-topics/topics.mshv2.css"" data-mshv1-stylesheet=""/template/packages/core-topics/topics.mshv1.css"" data-responsive-mobile=""template/packages/core-topics/topics.mobile.css"" data-responsive-tablet=""template/packages/core-topics/topics.tablet.css"""--><link rel="stylesheet" type="text/css" href="template/packages/core-topics/css/topics.css"  data-mshv2-stylesheet="/template/packages/core-topics/topics.mshv2.css" data-mshv1-stylesheet="/template/packages/core-topics/topics.mshv1.css" data-responsive-mobile="template/packages/core-topics/topics.mobile.css" data-responsive-tablet="template/packages/core-topics/topics.tablet.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="plugins-topics" filetype="script"--><script src="template/packages/plugins-topics/script/default/jquery-plugins.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    <!--DXMETADATA start type="PackageLink" packagename="core-topics" filetype="script"--><script src="template/packages/core-topics/script/topics.min.js" type="text/javascript"></script><!--DXMETADATA end-->
    
    <!--DXMETADATA start type="TopicId" format="<meta name=""Microsoft.Help.Id"" content=""%%TopicId%%""/>" --><meta name="Microsoft.Help.Id" content="7931fb67-4a88-436e-ba86-696535bc4b45"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocParentId" format="<meta name=""Microsoft.Help.TocParent"" content=""%%TocParentId%%""/>" --><meta name="Microsoft.Help.TocParent" content="0750c4c2-a97b-44a4-b551-b2d5b9e96832"/><!--DXMETADATA end-->
    <!--DXMETADATA start type="TocOrdinal" format="<meta name=""Microsoft.Help.TocOrder"" content=""%%TocOrdinal%%""/>" --><meta name="Microsoft.Help.TocOrder" content="7"/><!--DXMETADATA end-->
    <meta name="Microsoft.Help.F1" content=""/>
    <meta name="Microsoft.Help.ContentType" content="Concepts" />
    <!--DXMETADATA start type="MshvKeywords" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="MshvMetaTags" condition="helpversion:value=3" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.Locale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Help3CatalogLocale" condition="helpversion:value=3" format="<meta name=""Microsoft.Help.TopicLocale"" content=""%%Help3CatalogLocale%%"" />"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Stylesheets" --><link rel="stylesheet" type="text/css" href="stylesheets/hs-simpletab.css"></link><!--DXMETADATA end-->
    <!--DXMETADATA start type="StylePropertyValues" format="<style>%%StylePropertyValues%%</style>" --><style>.i-is-new .i-page-title-text::after, ul#i-dt-root li.i-is-new>a::after { content: "New" }
</style><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scripts" --><!--DXMETADATA end-->
    <!--DXMETADATA start type="DesignTime"--><!--DXMETADATA end-->
    <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_PROPERTIES" --><!--DXMETADATA end -->
    <!--DXMETADATA start type="CustomHeadContent" --><link rel="stylesheet" type="text/css" href="template/packages/core-web/css/SP.css">
<script type="text/javascript">
var currentHeader = function() {
    return "spjs";
}
</script>
<script src="template/packages/core-web/script/topNavigation.js"></script>
<script async="" src="https://www.googletagmanager.com/gtm.js?id=GTM-WT462SJ"></script>
<script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime()
                , event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0]
                , j = d.createElement(s)
                , dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WT462SJ');
    </script>
<!--DXMETADATA end-->
</head>

<body>
    <div id="i-before-header-content" class="i-before-header-content">
        
    </div>

    <div id="i-header-container">
        <div id="i-header-content" class="i-header-content i-content-width-container">
            <!--DXMETADATA start type="LogoImage" --><!--DXMETADATA end-->
            <div class="i-project-title"><!--DXMETADATA start type="ProjectTitle" -->SpreadJS Documentation<!--DXMETADATA end--></div>
            <div class="i-search-container">
                <!--DXMETADATA start type="outputfileextension" format="<form action=""websearch%%outputfileextension%%"">" --><form action="websearch.html"><!--DXMETADATA end-->
                <input id="i-search" name="query"/>
                <input type="submit" id="i-search-button" value=""/>
                <!--DXMETADATA start type="Literal" value="</form>" --></form><!--DXMETADATA end-->
            </div>
            <!--DXMETADATA start type="outputfileextension" format="<a id=""i-index-button"" href=""webindex%%outputfileextension%%""></a>" --><a id="i-index-button" href="webindex.html"></a><!--DXMETADATA end-->
        </div>
    </div>
    
    <div class="i-content-width-container"><div class="i-busy-overlay"></div></div>

    <div id="i-breadcrumbs-outer-container" class="i-content-width-container"><!--DXMETADATA start type="Breadcrumbs" scrap="_BREADCRUMBS" --><div class="i-breadcrumbs-container">
<a href="overview.html">SpreadJS Documentation</a>
 / <a href="devguide.html">Developer's Guide</a>
 / <a href="features.html">Features</a>
 / <a href="ManagingDataVisualizationAndObjects.html">Manage Data Visualization and Objects</a>
 / <a href="Charts.html">Charts</a>
 / <a href="ConfigureChartElements.html">Chart Elements</a>
 / Data Markers</div><!--DXMETADATA end --></div>

    

    <div id="i-actions-outer-container" class="i-content-width-container">
        <div id="i-actions-container">
            <div id="i-actions-content" class="i-fixed-to-top">
                <!-- Spacing --> <span class="i-toggle-all-sections i-function-link">
                <label class="i-collapse-all"><!--DXMETADATA start type="Phrase" name="COLLAPSE_ALL" -->Collapse All<!--DXMETADATA end--></label>
                <label class="i-expand-all" style="display: none;"><!--DXMETADATA start type="Phrase" name="EXPAND_ALL" -->Expand All<!--DXMETADATA end--></label>
            </span><!--DXMETADATA start type="Literal" condition="communityenabled" value="%%scrap:name=_COMMUNITY_DROPDOWN%%" --><!--DXMETADATA end -->
                <div class="i-in-this-topic-container">
                    <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
                </div>
            </div>
        </div>
    </div>

    <div id="i-toc-outer-container" class="i-content-width-container">
        <div id="i-toc-container">
            <div id="i-toc-content" class="i-fixed-to-top">
                <div class="i-toc-content-scroll-container">
                    <div id="i-dynamic-toc-container"><ul id="i-dt-root"></ul></div>
                </div>
            </div>
        </div>
    </div>

    <div id="i-body-content-container" class="i-content-width-container">
        <div id="i-body-content" class="i-body-content">
            <div class="i-page-title"><div class="i-page-title-text"><!--DXMETADATA start type="ItemTitle" -->Data Markers<!--DXMETADATA end--></div></div>
            <div class="i-in-this-topic-container">
                <span class="i-action-group-heading"><!--DXMETADATA start type="Phrase" Name="IN_THIS_TOPIC" -->In This Topic<!--DXMETADATA end--></span>
            </div>
            <!--DXMETADATA start type="TopicSection" name="BodyText"--><p>SpreadJS enables users to create powerful charts by allowing them to&nbsp;configure data markers&nbsp;using different types of shapes and lines.&nbsp;Data markers are used to highlight data points in charts.&nbsp;While working with line charts and radar charts, you can change the appearance of the data markers to distinguish a&nbsp;series and enhance data visualization.</p>

<p>The following chart types support configuration of data markers in the worksheet.</p>

<ul>
    <li>Line Chart with Markers</li>

    <li>100% Stacked Line Chart with Markers</li>

    <li>Stacked Line Chart &nbsp;with Markers</li>

    <li>Scatter Chart with Straight Lines and Markers</li>

    <li>Scatter Chart with Smooth Lines and Markers</li>

    <li>Radar Chart with Markers</li>
</ul>

<p>The <a href="SpreadJS~GC.Spread.Sheets.Charts.SymbolShape.html" data-auto-update-caption="true">SymbolShape&nbsp;</a>enumeration offers the following types of shapes while configuring data markers in charts.</p>

<table style="HEIGHT: 529px; WIDTH: 50.39%">
    <thead>
        <tr>
            <th width="140"><strong>SymbolShape</strong></th>

            <th width="105"><strong>Value</strong></th>

            <th><strong>Image</strong></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td width="140">circle</td>

            <td width="105">0</td>

            <td><img style="HEIGHT: 52px; WIDTH: 49px" border="0" alt="" src="images/image-table/circle.jpg" width="65" height="69" /></td>
        </tr>

        <tr>
            <td width="140">dash</td>

            <td width="105">1</td>

            <td><img style="HEIGHT: 48px; WIDTH: 44px" border="0" alt="" src="images/image-table/dash.jpg" width="72" height="68" /></td>
        </tr>

        <tr>
            <td width="140">diamond</td>

            <td width="105">2</td>

            <td><img style="HEIGHT: 44px; WIDTH: 46px" border="0" alt="" src="images/image-table/diamond.jpg" width="72" height="73" /></td>
        </tr>

        <tr>
            <td width="140">dot</td>

            <td width="105">3</td>

            <td><img style="HEIGHT: 33px; WIDTH: 45px" border="0" alt="" src="images/image-table/dot.jpg" width="72" height="67" /></td>
        </tr>

        <tr>
            <td width="140">none</td>

            <td width="105">4</td>

            <td>&nbsp;&nbsp; none</td>
        </tr>

        <tr>
            <td width="140">plus</td>

            <td width="105">6</td>

            <td><img style="HEIGHT: 36px; WIDTH: 40px" border="0" alt="" src="images/image-table/plus.jpg" width="69" height="70" /></td>
        </tr>

        <tr>
            <td width="140">square&nbsp;</td>

            <td width="105">7</td>

            <td><img style="HEIGHT: 42px; WIDTH: 42px" border="0" alt="" src="images/image-table/square.jpg" width="71" height="72" /></td>
        </tr>

        <tr>
            <td width="140">star</td>

            <td width="105">8</td>

            <td><img style="HEIGHT: 33px; WIDTH: 39px" border="0" alt="" src="images/image-table/star.jpg" width="71" height="72" /></td>
        </tr>

        <tr>
            <td width="140">triangle</td>

            <td width="105">9</td>

            <td><img style="HEIGHT: 34px; WIDTH: 39px" border="0" alt="" src="images/image-table/triangle.jpg" width="57" height="56" /></td>
        </tr>

        <tr>
            <td width="140">x</td>

            <td width="105">10</td>

            <td><img style="HEIGHT: 36px; WIDTH: 38px" border="0" alt="" src="images/image-table/cross.jpg" width="71" height="72" /></td>
        </tr>
    </tbody>
</table>

<p>The&nbsp;<a href="SpreadJS~GC.Spread.Sheets.Charts.LineType.html" data-auto-update-caption="true">LineType&nbsp;</a>enumeration offers the following line types while configuring data markers in charts.</p>

<table style="HEIGHT: 354px; WIDTH: 61.61%">
    <thead>
        <tr>
            <th width="140"><strong>LineType</strong></th>

            <th width="105"><strong>Value</strong></th>

            <th><strong>Image</strong></th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td width="140">solid</td>

            <td width="105">0</td>

            <td><img border="0" alt="" src="images/line-type/solid.png" /></td>
        </tr>

        <tr>
            <td width="140">dot</td>

            <td width="105">1</td>

            <td><img border="0" alt="" src="images/line-type/dot.png" /></td>
        </tr>

        <tr>
            <td width="140">dash</td>

            <td width="105">2</td>

            <td><img border="0" alt="" src="images/line-type/dash.png" /></td>
        </tr>

        <tr>
            <td width="140">lgDash</td>

            <td width="105">3</td>

            <td><img border="0" alt="" src="images/line-type/lgdash.png" /></td>
        </tr>

        <tr>
            <td width="140">dashDot</td>

            <td width="105">4</td>

            <td><img border="0" alt="" src="images/line-type/dashDot.png" /></td>
        </tr>

        <tr>
            <td width="140">lgDashDot</td>

            <td width="105">5</td>

            <td><img border="0" alt="" src="images/line-type/lgdashdot.png" /></td>
        </tr>

        <tr>
            <td width="140"><br />
            lgDashDotDot</td>

            <td width="105">6</td>

            <td><img border="0" alt="" src="images/line-type/lgdashdotdot.png" /></td>
        </tr>

        <tr>
            <td width="140">sysDash</td>

            <td width="105">7</td>

            <td><img border="0" alt="" src="images/line-type/sysDash.png" /></td>
        </tr>

        <tr>
            <td width="140">sysDot</td>

            <td width="105">8</td>

            <td><img border="0" alt="" src="images/line-type/sysDot.png" /></td>
        </tr>

        <tr>
            <td width="140">sysDashDot</td>

            <td width="105">9</td>

            <td><img border="0" alt="" src="images/line-type/sysDashDot.png" /></td>
        </tr>

        <tr>
            <td width="140">sysDashDotDot</td>

            <td width="105">10</td>

            <td><img border="0" alt="" src="images/line-type/sysDashDotDot.png" /></td>
        </tr>
    </tbody>
</table>

<h3>Example</h3>

<p>For example, let's say you're working with a business application that shows the usage of different web browsers using a line chart. Now, you may want to highlight the color and shape of an individual point in the chart or modify all the data points in a series without altering other data in the chart. Configuring data markers of different colors and shapes will enable your chart to stand out from the rest and will make it easy for business analysts to manipulate and highlight crucial information quickly and effectively.</p>

<p>The following image depicts a Line Chart with markers.&nbsp;Each point on the line&nbsp;is a data marker that represents a single data value located in the cell.</p>

<p><img border="0" alt="" src="images/chart.jpg" />&nbsp;</p>

<h3>Using Code</h3>

<p>Refer to the following code in order to configure data markers in a line chart.</p>

<div class="i-filtered-content-JavaScript" data-title="JavaScript" data-itemid="JavaScript">
    <table class="i-syntax-table">
        <tbody>
            <tr>
                <th>JavaScript</th>

                <th>
                    <div class="i-copy-code-wrapper">
                        <span class="i-copy-code">Copy Code</span>
                    </div>
                </th>
            </tr>

            <tr>
                <td class="i-code" colspan="2">
                    <p>&lt;script&gt;<br />
                    $(document).ready(function ()</p>

                    <p>{<br />
                    var chart_line, chart_lineStacked, chart_lineStacked100, sheet;<br />
                    window.onload = function ()</p>

                    <p>{<br />
                    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));<br />
                    var sheet = spread.getActiveSheet();<br />
                    var dataArray =</p>

                    <p>[<br />
                    &nbsp;&nbsp;["", '2012', '2013', '2014', '2015', '2016', '2017'],<br />
                    &nbsp;&nbsp;["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360],<br />
                    &nbsp;&nbsp;["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304],<br />
                    &nbsp;&nbsp;["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834],<br />
                    &nbsp;&nbsp;];<br />
                    sheet.setArray(0, 0, dataArray);<br />
                    var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.lineMarkers, 30, 85, 400, 250, 'A1:G4');<br />
                    var ser1 = chart.series().get(0);<br />
                    ser1.symbol =</p>

                    <p>{<br />
                    &nbsp;&nbsp;fill: 'red',<br />
                    &nbsp;&nbsp;fillColorTransparency: 0.3,<br />
                    &nbsp;&nbsp;size: 20,<br />
                    &nbsp;&nbsp;shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,<br />
                    &nbsp;&nbsp;border:</p>

                    <p>&nbsp;&nbsp; {<br />
                    &nbsp;&nbsp;&nbsp;&nbsp; color: "green",<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 2,<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lineType: GC.Spread.Sheets.Charts.LineType.solid,<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;colorTransparency: 0.5,<br />
                    &nbsp;&nbsp;&nbsp;}<br />
                    }<br />
                    chart.series().set(0, ser1);<br />
                    };<br />
                    });<br />
                    &lt;/script&gt;</p>
                </td>
            </tr>
        </tbody>
    </table>
</div><!--DXMETADATA end-->
            <a name="seealsobookmark"></a>
            <!--DXMETADATA start type="FilteredItemList" scrap="CATEGORISED_LINKS" namespace="linkcategory" source="Item" filter="" NoHeader="True" NoFooter="True" format="%%replaceinquotes:value=false%%%%scrap:name=_COLLAPSIBLE_HEADER,idprefix=seealso,caption=""%%phrase:name=SeeAlso%%%%designlist:tagidentifier=seealso,itemtype=See Also%%""%%%%filtereditemlist%%</div>"--><!--DXMETADATA end-->
            
            <div id="i-footer-content" class="i-footer-content">
                <!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="CopyrightNotice" format="<p>&nbsp;</p><p>&nbsp;</p><hr style=""height: 1px"" /><p>%%variable%%</p>" --><p>&nbsp;</p><p>&nbsp;</p><hr style="height: 1px" /><p><p>Copyright © 2019 GrapeCity, Inc. All rights reserved.</p>
<p><a href="https://www.grapecity.com/en/forums/winforms-edition" target="_blank">Product Support Forum</a> | <a href="javascript:window.print()">Print this page</a></p>
<ul class="social">
<li><a href="https://www.facebook.com/GrapeCityUS/" target="_blank" class="facebook">&nbsp;</a></li>
<li><a href="https://twitter.com/GrapeCityUS" target="_blank" class="twitter">&nbsp;</a></li>
<li><a href="https://www.linkedin.com/company/grapecity" target="_blank" class="linkedin">&nbsp;</a></li>
</ul>
</p><!--DXMETADATA end -->
<!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --><!--DXMETADATA end-->
            </div>
        </div>
    </div>
        
    <script type="text/javascript">
        $(function () {
            var documentInstance = new Innovasys.Content.Document(document.body);
            documentInstance.load();
        });
    </script>
</body>
</html>
